<!DOCTYPE html>
<html>
<head>
<title>菜单管理</title>
#@head()
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
	        <div class="ibox">
	            <div class="ibox-content">
	                <div class="fixed-table-toolbar">
	                    <div class="columns pull-left">
	                        <button type="button" class="btn  btn-primary"
	                                onclick="add(0)">
	                            <i class="fa fa-plus" aria-hidden="true"></i>添加
	                        </button>
	                        <button type="button" class="btn  btn-danger"
	                                onclick="batchRemove()">
	                            <i class="fa fa-trash" aria-hidden="true"></i>删除
	                        </button>
	                    </div>
	                    <!--<div class="columns pull-right">
	                        <button class="btn btn-success" onclick="reLoad()">查询</button>
	                    </div>
	
	                    <div class="columns pull-right col-md-2 nopadding">
	                        <input id="searchName" type="text" class="form-control"
	                               placeholder="">
	                    </div>-->
	                </div>
	                <table id="exampleTable"  data-mobile-responsive="true"></table>
	            </div>
	        </div>
	    </div>
	</div>
</body>
#@footer()

<script type="text/javascript">

function add(parentId){
	openWindow('添加','add?parentId='+parentId,false)
}

function edit(id){
	openWindow('修改','edit?id='+id,false)
	
}

var ctx = '';
var prefix = ctx +"./"
$(function() {
	load();
});

var columns = [
	// {  field: 'selectItem',checkbox: true },
    {
        title: '编号',
        field: 'id',
        visible: false,
        align: 'center',
        valign: 'center',
		width:'60px'
    },
    {
        title: '名称',
        field: 'name',
        align: 'left',
    },

    {
        title: '图标',
        field: 'icon',
        align: 'center',
        valign: 'center',
        formatter:  function (row,index) {
            return row.icon == null ? '' : '<i class="' + row.icon + ' fa-lg"></i>';
        }
    },
    {
        title: '类型',
        field: 'type',
        align: 'center',
        valign: 'center',
        formatter: function (row,index) {
            if (row.type == 0) {
                return '<span class="label label-primary">目录</span>';
            }
            if (row.type == 1) {
                return '<span class="label label-success">菜单</span>';
            }
            if (row.type == 2) {
                return '<span class="label label-warning">按钮</span>';
            }
        }
    },
    {
        title: '地址',
        valign: 'center',
        field: 'url'
    },
    {
        title: '权限标识',
        valign: 'center',
        field: 'perms'
    },
    {
        title: '操作',
        field: 'id',
        align: 'center',
        valign: 'center',
		width:'170px',
        formatter: function (row,index) {
            var e = '<a class=" '  + '" href="#" mce_href="#" title="编辑" onclick="edit(\''
                + row.id
                + '\')"> 编辑 </a> &nbsp;';
            var a = '<a class=" '  + '" href="#" title="增加下級"  mce_href="#" onclick="add(\''
                + row.id
                + '\')"> 增加下级 </a> &nbsp;';
            var d = '<a class=" '  + '" href="#" title="删除"  mce_href="#" onclick="remove(\''
                + row.id
                + '\')"> 删除 </a> &nbsp;';

            return e + d + a;
        }
    }];

function load(){
	$('#exampleTable').bootstrapTreeTable(
        {
            id: 'id',
            code: 'id',
            rootCodeValue: 0,
            parentCode: 'parentId',
            type: "GET", // 请求数据的ajax类型
            url: prefix + 'dataAjax', // 请求数据的ajax的url
            ajaxParams: {sort:'order_num'}, // 请求数据的ajax的data属性
            expandColumn: '1',// 在哪一列上面显示展开按钮
            striped: true, // 是否各行渐变色
            bordered: true, // 是否显示边框
            expandAll: false, // 是否全部展开
            // toolbar : '#exampleToolbar',
            columns: columns
      });
}

function reLoad() {
	load();
}

function remove(id) {
	layer.confirm('确定要删除选中的记录？', {
		btn : [ '确定', '取消' ]
	}, function() {
		$.ajax({
			url : prefix + "remove?id="+id,
			type : "post",
			success : function(r) {
				if (r.code == 0) {
					layer.msg(r.msg);
					reLoad();
				} else {
					layer.msg(r.msg);
				}
			}
		});
	})
}

function batchRemove() {
	var rows = $('#exampleTable').bootstrapTreeTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
	if (rows.length == 0) {
		layer.msg("请选择要删除的数据");
		return;
	}
	
	layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
		btn : [ '确定', '取消' ]
	// 按钮
	}, function() {
		var data = '';
		// 遍历所有选择的行数据，取每条数据对应的ID
		$.each(rows, function(i, row) {
			data += '&ids='+row['id'];
		});
		$.ajax({
			type : 'POST',
			data : data,
			url : prefix + 'batchRemove',
			success : function(r) {
				if (r.code == 0) {
					layer.msg(r.msg);
					reLoad();
				} else {
					layer.msg(r.msg);
				}
			}
		});
	}, function() {});
}
</script>
</html>
